<template>
  <div id="app">
    <img src="./assets/imgs/bcsz.png" alt="">
  </div>
</template>
  
  <script>
import * as PIXI from "pixi.js";
export default {
  setup() {
    const app = new PIXI.Application({
      width: window.innerWidth,
      height: window.innerHeight,
      backgroundColor: "white",
      resolution: window.devicePixelRatio || 1,
    });
    document.body.appendChild(app.view);

    // 创建一个纹理，注意路径不要直接用相对路径，用require引一下
    let texture = PIXI.Texture.from(require('./assets/imgs/bcsz.png'));

    // 创建一个精灵
    let sprite = new PIXI.Sprite(texture);  

    // 设置精灵的位置
    sprite.x = app.screen.width/2;
    sprite.y = app.screen.height/2;

    // 设置精灵的旋转
    sprite.rotation = Math.PI / 4;
    // 设置精灵的锚点, 锚点其实就是这个元素的基准点，以后无论是旋转还是平移都是按照这个点来了
    sprite.anchor.set(0.5,0.5);//注意0.5的意思是50%不是px值

    // 设置精灵的缩放
    sprite.scale.set(2,2);

    // 设置精灵的透明度
    sprite.alpha =  0.8;

    app.stage.addChild(sprite);

    // ticker可以实现一个动画,delta就是一个在1上下一直循环变化的数值，我们可以利用它完成一些动画
    app.ticker.add((delta)=>{
      // console.log(delta);
      // 旋转动画
      sprite.rotation += 0.1*delta;

      // 平移动画
      // if(sprite.x>window.innerWidth){
      //   sprite.x = 0;
      // }
      // sprite.x += delta;
    })
  },
};
</script>
  
  <style>
canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
  